<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="50px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="排序" prop="sort">
            <el-input-number
              type="number"
              style="width: 200px;"
              :min="1"
              placeholder="请输入"
              v-model="form.sort"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="数量" prop="num">
            <el-input-number
              type="number"
              style="width: 200px !important;"
              placeholder="请输入"
              :min="1"
              v-model="form.num"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-button
          size="small"
          type="primary"
          style="margin-bottom: 20px;"
          round
          @click="addRewards()"
        >添加王者奖品</el-button>
        <el-table
          :header-cell-style="{background:'#eee'}"
          :data="form.blindsData"
          border
          style="width: 100%;margin-bottom: 20px;"
        >
          <el-table-column align="center" prop="goods_name" label="奖品名称"></el-table-column>
          <el-table-column align="center" label="图片" width="150">
            <template slot-scope="scope">
              <el-popover placement="top-start" title trigger="hover">
                <img :src="scope.row.img" alt style="max-width:60px" />
                <el-avatar
                  slot="reference"
                  shape="square"
                  :size="50"
                  fit="scale-down"
                  :src="scope.row.img"
                ></el-avatar>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" fixed="right" label="操作" width="160">
            <template slot-scope="scope">
              <el-popconfirm
                confirmButtonText="好的"
                cancelButtonText="不用了"
                icon="el-icon-info"
                iconColor="red"
                title="这是一段内容确定修改吗？"
                @onConfirm="addRewards(scope.row)"
              >
                <el-button slot="reference" type="text" size="small" style="color:red">修改</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="toBack()">取消</el-button>
      </el-form-item>
    </el-form>
    <!-- 抽屉 -->
    <el-dialog title="提示" :visible.sync="drawer" width="80%" :before-close="handleClose">
      <div>
        <FormTable @drawerClose="drawerClose" v-if="drawer"></FormTable>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { boxRewardList, boxRewardTypeList } from '@/api/boxreward'
import { categoryList } from '@/api/product'

import { addHero, editHero } from '@/api/energy'

import { rewardList } from '@/api/system'
import { parseTime } from '@/utils/index'
import FormTable from './formtable.vue'
import { upload } from '@/api/system'

export default {
  name: 'AddBoxWX',
  components: {
    FormTable
  },
  props: {
    formData: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    formData: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.form = Object.assign({}, newVal, {
            id: newVal.id,
            sort: +newVal.sort,
            num: +newVal.num,
            rule_id: +newVal.rule_id,
            blindsData: newVal.goods_id
              ? [
                  {
                    id: newVal.goods_id,
                    goods_name: newVal.goods_name,
                    img: newVal.img
                  }
                ]
              : []
          })
          console.log(this.form)
        }
      },
      immediate: true
    }
  },
  created() {},
  data() {
    return {
      boxRewardData: [],
      form: {
        num: 1,
        sort: 1,
        rule_id: 1,
        blindsData: []
      },
      rules: {
        sort: [
          {
            type: 'number',
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ],
        num: [
          {
            type: 'number',
            required: true,
            message: '请输入数量',
            trigger: 'blur'
          }
        ]
      },
      drawer: false
    }
  },
  mounted() {},
  activated() {},
  methods: {
    getDetails() {
      if (this.dataId) {
        energyDetails({ id: this.dataId }).then((res) => {
          this.form = res.data

          this.form.blindsData = res.data.goods_grade
        })
      }
    },
    drawerClose(arr) {
      console.log(arr)
      this.drawer = false
      this.form.blindsData = arr
    },

    onSubmit() {
      console.log(this.form)
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.form = {
            id: this.form.id || undefined,
            goods_id:
              this.form.blindsData.length > 0
                ? this.form.blindsData[0].id
                : undefined,
            rule_id: 31,
            sort: this.form.sort,
            num: this.form.num
          }

          if (!this.form.id) {
            addHero(this.form).then((res) => {
              if (res.st == 1) {
                this.$message.success('添加成功')
                this.$emit('tolist')
              } else {
                this.$message.success(res.msg)
              }
            })
          } else {
            editHero(this.form).then((res) => {
              if (res.st == 1) {
                this.$message.success('修改成功')
                this.$emit('tolist')
              } else {
                this.$message.success(res.msg)
              }
            })
          }
        }
      })
    },
    // 上传图片
    handleAvatarSuccess(res, file) {
      // this.imageUrl = this.url + res.key
      this.form.icon = this.url + res.key
    },
    beforeAvatarUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1
      if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 1MB!')
        return
      }
    },

    handleAvatarSuccessbg(res, file) {
      // this.bg_imgUrl = this.url + res.key

      this.form.bg_img = this.url + res.key
    },
    beforeAvatarUploadbg(file) {
      const isLt1M = file.size / 1024 / 1024 < 1
      if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 1MB!')
        return
      }
    },

    handleClose() {
      this.drawer = false
      this.form.blindsData = []
    },

    // 添加奖品
    async addRewards(num) {
      this.drawer = true
      this.selectArr = this.form.goods_data
    },
    toBack() {
      this.form.blindsData = []
      this.$emit('tolist')
    }
  }
}
</script>
<style lang="scss" scoped>
.query-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  ::v-deep .el-form {
    display: flex;
  }
}
.box-card {
  margin-bottom: 20px;
}
.search {
  display: flex;
  align-items: center;
}

::v-deep .el-drawer.rtl {
  width: 850px !important;
  overflow: auto;
}
// 上传图片
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
